<template>
	<view class="container">
		<u-checkbox-group v-model="selection" iconPlacement="right" placement="column" @change="handleChange">
			<u-checkbox activeColor="#FE3F59" labelSize="30rpx" labelColor="#202020" v-for="(item,index) in list"
				:key="index" :label="item.label" :name="item.value"></u-checkbox>
		</u-checkbox-group>
	</view>
</template>

<script>
	import {
		accomplishmentList
	} from "@/api/mine/auth.js"
	export default {
		props: {
			value: {
				type: Array
			},
			list:{
				type:Array
			}
		},
		data() {
			return {
				selection: []
			}
		},
		watch: {
			value: {
				immediate: true,
				deep: true,
				async handler(val) {
					if (Array.isArray(val)) {
						this.selection = val.map(item => item.value)
					}
				}
			}
		},
		methods: {
			
			handleChange(val) {
				let selection = val.map(item => {
					let findResult = this.list.find(subItem => subItem.value == item)
					return findResult
				})
				this.$emit('input', selection)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-top: 40rpx;

		::v-deep .u-checkbox {
			margin-bottom: 40rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #202020;
			line-height: 40rpx;
		}
	}
</style>